/** 
 * 材质编辑工具 
 * */
import { Space } from 'antd';
import styles from './index.module.less';
import React from 'react';
import * as THREE from 'three';
import Controller from './Controller';
import useReceiveProps from './Controller/hooks/useReceiveProps';
import SelectedProperties from './panels/SelectedProperties';
import MaterialProperties from './panels/MaterialProperties';
import MeshPhongMaterialProperties from './panels/MeshPhongMaterialProperties';

const EditMaterialContext = React.createContext<Controller>(null as any);

export interface IEditMaterialProps {

    /** 当前编辑的材质 */
    material?: THREE.Material;

    /** 材质改变了 */
    onChange?: (e: THREE.Material) => void;
}

export default class EditMaterial extends React.Component<IEditMaterialProps>{

    /** 获取控制器沟子 */
    static useController = () => React.useContext(EditMaterialContext);

    render() {
        return <Main {...this.props} />
    }
}

function Main(props: IEditMaterialProps) {

    const controller = React.useMemo(() => new Controller(), []);

    useReceiveProps(controller, props.material?.clone() ?? undefined, props.onChange);

    return (
        <EditMaterialContext.Provider value={controller}>
            <Space direction="vertical" className={styles.editMaterial}>
                <SelectedProperties />          {/* 选择材质 */}
                <MaterialProperties />          {/* 基础属性 */}
                <MeshPhongMaterialProperties /> {/* 镜面高光 */}
            </Space>
        </EditMaterialContext.Provider>
    )
}